<template>
  <div>
    <el-card>
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        :rules="formRules"
        label-position="top"
      >
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              label="仓库编码"
              label-position="top"
              prop="personName"
            >
              <el-input v-model="form.code" disabled />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="仓库名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仓库类型" label-position="top" prop="type">
              <el-select
                v-model="form.type"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in optionType"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label-position="top" label="省/市/区" prop="location">
          <el-cascader
            v-model="selectedOptions"
            :options="options"
            :props="{ expandTrigger: 'hover' }"
            style="width: 100%"
            @change="handleChange"
          />
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="16">
            <el-form-item label="详细地址" label-position="top">
              <el-input v-model="form.address" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仓库状态" prop="status">
              <el-radio v-model="form.status" label="1">启用</el-radio>
              <el-radio v-model="form.status" label="0">停用</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="仓库面积" label-position="top">
              <el-input v-model="form.surface" placeholder="请输入">
                <template slot="append">m³</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="负责人" label-position="top" prop="personName">
              <el-input v-model="form.personName" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="联系电话"
              label-position="top"
            >
              <el-input v-model="form.phone" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row :gutter="20" justify="center" type="flex">
        <el-button round @click="$router.go(-1)">返回</el-button>
        <el-button type="warning" round @click="subNew">提交</el-button>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { regionData, CodeToText } from 'element-china-area-data'
import { CK, newWarehouse } from '@/api'
export default {
  data() {
    return {
      selectedOptions: [],
      radio: '1',
      form: {
        address: '', // string 详area: '', // string   区
        city: '', // string  市
        code: '', //  string    编码
        createName: '', // string  创建人
        createTime: '', //  string  date-time  创建时间
        // createUser: 0, // integer  int64  创建人ID
        // id: 0,     // integer    int64   主键
        includedNum: '', // integer   int32  库区数量
        location: '', // string  省市区描述
        logicDel: '', // integer  int32   逻辑删除 0 删除
        name: '', // string   名称
        personId: '', // integer  int64   负责人id
        personName: '', // string   负责人姓名
        phone: '', //  string  联系电话
        province: '', // string   省
        remark: '', // string   备注
        status: '1', // integer  int32  状态 0 停用 1启用
        surface: '', // number  面积
        type: '', // string  类型 中转仓:ZZ、加工仓:JG、储备仓:CB、冷藏仓:LC
        updateName: '', // string   更新人
        updateTime: '', // string   date-time 最后修改时间
        updateUser: '' // integer int64  最后修改人ID
      },
      formRules: {
        name: [{ required: true, message: '请输入仓库名称', trigger: 'blur' }],
        type: [{ required: true, message: '请输入仓库类型', trigger: 'blur' }],
        status: [
          { required: true, message: '请输入仓库状态', trigger: 'blur' }
        ],
        personName: [
          { required: true, message: '请输入负责人', trigger: 'blur' }
        ],
        location: [
          { required: true, message: '请输入省/市/区', trigger: 'blur' }
        ]
      },
      options: regionData,
      optionType: [
        { value: 'ZZ', label: '中转仓' },
        { value: 'JG', label: '加工仓' },
        { value: 'CB', label: '储备仓' },
        { value: 'LC', label: '冷藏仓' }
      ]
    }
  },
  async created() {
    const res = await CK()
    this.form.code = res.data
    console.log(this.form.code)
  },
  methods: {
    onSubmit() {
      console.log('submit!')
    },
    handleChange() {
      var loc = ''
      for (let i = 0; i < this.selectedOptions.length; i++) {
        loc += CodeToText[this.selectedOptions[i]] + '/'
      }

      // string  省市区描述
      this.form.location = loc.substring(0, loc.length - 1)
      this.form.province = this.selectedOptions[0]
      this.form.city = this.selectedOptions[1]
      this.form.area = this.selectedOptions[2]
      // console.log(this.form.location)
    },
    subNew() {
      this.$refs.form.validate(async(valid) => {
        if (!valid) return
        await newWarehouse(this.form)
        this.$message.success('新建仓库成功')
        this.$router.go(-1)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-input__inner {
  height: 40px;
  line-height: 40px;
  border: 1px solid #f8f5f5;
  background: #f8f5f5;
  border-radius: 6px;
}
::v-deep .el-button {
  width: 170px;
  margin: 0 15px;

  color: #332929;
}
::v-deep .el-button--default {
  background-color: #f8f5f5;
}
::v-deep .el-button--warning {
  background-color: #ffb200;
}
::v-deep .el-input-group__append {
  background-color: #e7dfdf;
}
::v-deep .el-form-item__label {
  font-weight: normal;
}
</style>
